<template>
  <div class="course-community">
    <div class="header">
      <h2>课程问答区</h2>
      <div class="filters">
        <el-select v-model="postType" placeholder="全部类型" clearable style="width: 140px" @change="load">
          <el-option label="全部" value="" />
          <el-option label="问题" value="QUESTION" />
          <el-option label="讨论" value="DISCUSSION" />
          <el-option label="笔记" value="NOTE" />
        </el-select>
        <el-input v-model="keyword" placeholder="搜索标题/内容" clearable @change="load" style="width: 240px" />
        <el-button type="primary" @click="openCreate">发起话题</el-button>
      </div>
    </div>

    <el-empty v-if="items.length === 0 && !loading" description="暂无帖子" />

    <el-table v-loading="loading" :data="items" stripe>
      <el-table-column label="标题" min-width="320">
        <template #default="{ row }">
          <div class="title-container">
            <a class="title" @click.prevent="view(row.id)">
              <el-icon v-if="row.isSolved" style="color: #67c23a; margin-right: 6px;"><CircleCheckFilled /></el-icon>
              {{ row.title }}
            </a>
            <el-tag v-if="row.isSolved" type="success" size="small" style="margin-left: 8px;">已解决</el-tag>
          </div>
          <div class="sub">{{ row.userName }} · {{ formatTime(row.createdAt) }} · {{ row.postType }}</div>
        </template>
      </el-table-column>
      <el-table-column label="回复" width="100" prop="commentCount" />
      <el-table-column label="点赞" width="100" prop="likeCount" />
      <el-table-column label="状态" width="120">
        <template #default="{ row }">
          <el-tag v-if="row.isSolved" type="success">已解决</el-tag>
          <el-tag v-else type="info">未解决</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="view(row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pager">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="load"
      />
    </div>

    <el-dialog v-model="showCreate" title="发起话题" width="700px" :close-on-click-modal="false">
      <el-form :model="form" label-width="80px">
        <el-form-item label="类型">
          <el-select v-model="form.postType" style="width: 180px">
            <el-option label="问题" value="QUESTION" />
            <el-option label="讨论" value="DISCUSSION" />
            <el-option label="笔记" value="NOTE" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreate = false">取消</el-button>
        <el-button type="primary" @click="submitCreate" :loading="submitting">发布</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CircleCheckFilled } from '@element-plus/icons-vue'
import { communityApi, type PostRequest } from '@/api/community'
import { getErrorMessage } from '@/api/http'

const route = useRoute()
const router = useRouter()
const courseId = Number(route.params.id)

const loading = ref(false)
const items = ref<any[]>([])
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const postType = ref('')
const keyword = ref('')

const showCreate = ref(false)
const submitting = ref(false)
const form = ref<PostRequest>({ courseId, title: '', content: '', postType: 'QUESTION' })

const load = async () => {
  try {
    loading.value = true
    const res = await communityApi.getPostsByCourse(courseId, {
      postType: postType.value || undefined,
      keyword: keyword.value || undefined,
      page: page.value,
      pageSize: pageSize.value
    })
    items.value = res.content || []
    total.value = res.totalElements || 0
  } catch (e: any) {
    ElMessage.error(getErrorMessage(e))
  } finally {
    loading.value = false
  }
}

const openCreate = () => {
  showCreate.value = true
}

const submitCreate = async () => {
  if (!form.value.title?.trim()) {
    ElMessage.warning('请输入标题')
    return
  }
  try {
    submitting.value = true
    await communityApi.createPost(form.value)
    showCreate.value = false
    form.value.title = ''
    form.value.content = ''
    form.value.postType = 'QUESTION'
    load()
    ElMessage.success('发布成功')
  } catch (e: any) {
    ElMessage.error(getErrorMessage(e))
  } finally {
    submitting.value = false
  }
}

const view = (id: number) => {
  router.push(`/posts/${id}`)
}

const formatTime = (s: string) => new Date(s).toLocaleString('zh-CN')

onMounted(load)
</script>

<style scoped>
.course-community { padding: 20px; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.filters { display: flex; gap: 10px; }
.title { cursor: pointer; color: #409eff; }
.title:hover { text-decoration: underline; }
.sub { color: #909399; font-size: 12px; }
.pager { margin-top: 12px; text-align: center; }
</style>





